<template>
  <!-- 保持原有模板结构不变 -->
  <view class="container">
    <view class="logo-area">
      <image src="/static/logo.png" class="logo"></image>
    </view>

    <view class="form-area">
      <view class="input-item">
        <input 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号码"
          class="input"
        />
      </view>
      
      <view class="input-item code-item">
        <input
          type="number"
          v-model="code"
          placeholder="请输入验证码"
          maxlength="6"
          class="input"
        />
        <view 
          class="code-btn" 
          :class="{ disabled: countdown > 0 }"
          @tap="getCode"
        >
          {{ countdown > 0 ? `${countdown}s后获取` : '获取验证码' }}
        </view>
      </view>

      <button 
        class="login-btn" 
        :disabled="!canLogin" 
        @tap="handleLogin"
      >
        登录
      </button>
    </view>

    <view class="other-login">
      <view class="wechat-login" @tap="wechatLogin">
        <image src="/static/wechat.png" class="wechat-icon"></image>
        <text>微信一键登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue'
import store from '../../store/index.js';

// 响应式数据
const phone = ref('')
const code = ref('')
const countdown = ref(0)
const timer = ref(null)

// 计算属性
const canLogin = computed(() => 
  phone.value.length === 11 && code.value.length === 6
)

// 生命周期
onUnmounted(() => {
  clearInterval(timer.value)
})

// 方法
const getCode = () => {
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    uni.showToast({ title: '手机号格式错误', icon: 'none' })
    return
  }
  
  if (countdown.value === 0) {
    startCountdown()
  }
}

const startCountdown = () => {
  countdown.value = 60
  timer.value = setInterval(() => {
    if (countdown.value <= 0) {
      clearInterval(timer.value)
      return
    }
    countdown.value--
  }, 1000)
}

// const handleLogin = () => {
//   if (!canLogin.value) return
  
//   uni.showLoading({ title: '登录中...' })
//   setTimeout(() => {
//     uni.hideLoading()
//     uni.switchTab({ url: '/pages/index/index' })
//   }, 1500)
// }



//  const  wechatLogin =  async () => {
// 	console.log("点击登录")
// 	 try {
// 	    await store.dispatch("dologin", "");
// 		uni.switchTab({ url: '/pages/index/index' })
// 	  } catch (err) {
// 	    console.error('登录失败:', err.message);
// 	  }
// }


const wechatLogin = async () => {
  console.log("点击登录");
  // 添加加载提示
  uni.showLoading({
    title: '登录中...',
    mask: true
  });
  
  try {
    await store.dispatch("dologin", "");
    // 登录成功关闭加载提示
    uni.hideLoading();
    uni.switchTab({ url: '/pages/index/index' });
  } catch (err) {
    // 登录失败关闭加载提示
    uni.hideLoading();
    console.error('登录失败:', err.message);
    // 添加错误提示（使用用户友好的文案）
    uni.showToast({
      title: '登录失败，请重试', // 可根据 err.message 显示具体原因
      icon: 'none',
      duration: 2000
    });
  }
}
</script>

<style lang="scss">
/* 样式保持与之前相同 */
.container {
  padding: 60rpx 80rpx;
  min-height: 100vh;
  background-color: #ffffff;
}

.logo-area {
  text-align: center;
  margin: 120rpx 0;
  
  .logo {
    width: 200rpx;
    height: 200rpx;
    border-radius: 24rpx;
  }
}

.input-item {
  margin-bottom: 40rpx;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  
  .input {
    height: 80rpx;
    font-size: 32rpx;
  }
  
  &.code-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .code-btn {
      color: #07c160;
      font-size: 28rpx;
      padding: 10rpx 20rpx;
      
      &.disabled {
        color: #999;
      }
    }
  }
}

.login-btn {
  margin-top: 80rpx;
  background-color: #07c160;
  color: white;
  border-radius: 50rpx;
  
  &[disabled] {
    background-color: #ddd;
  }
}

.other-login {
  position: fixed;
  bottom: 80rpx;
  width: 100%;
  left: 0;
  text-align: center;
  
  .wechat-login {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: #666;
    
    .wechat-icon {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>